import {} from '@/api/Home'
import { color } from 'echarts'
import * as echarts from 'echarts'
export default function Home() {
  let count = ref(0)
  const state = reactive({
    option1: {
      title: [
        {
          text: `{c|在岗人数}\n{d|${count.value}}{a|(人)}`,
          x: '49%',
          y: 'center',
          textAlign: 'center',
          textStyle: {
            rich: {
              d: {
                fontSize: 18,
                color: '#0d1f53',
                fontWight: 700,
              },
              c: {
                fontSize: 9,
                color: '#0d1f53',
                height: 18,
              },
              a: {
                fontSize: 9,
                color: '#0d1f53',
              },
            },
          },
        },
      ],
      graphic: {
        elements: [
          {
            type: 'image',
            z: 3,
            style: {
              image:
                '',
              width: 70,
              height: 70,
            },
            left: 'center',
            top: 'center',
          },
        ],
      },
      // grid:{
      //   top:'5%',
      //   bottom: '5%',
      //   left: '1%',
      //   right:'15%'
      // },
      series: {
        itemStyle: {
          normal: {
            color: function (params) {
              return [
                '#4daef5',
                '#49decb',
                '#2caef6',
                '#1070f0',
                '#4a8bf4',
                '#3ac8fa',
              ][params.dataIndex]
            },
          },
        },
        type: 'pie',
        //clockWise: false ,
        roseType: 'radius',
        radius: ['15%', '65%'],
        center: ['center', 'center'],
        labelLine: {
          normal: {
            length: 8,
            length2: 50,
          },
        },
        label: {
          normal: {
            formatter: (params) => {
              return (
                '{radius|' +
                params.percent.toFixed(0) +
                '%}\n{percent|' +
                params.name +
                '}\n\n{name|' +
                params.value +
                '(人)' +
                '}'
              )
            },
            // padding:[0,-100,0,-100],
            padding: [0, -50, -5, -55],
            rich: {
              radius: {
                fontSize: 10,
                // padding: [0, 10, 0, 20],
                padding: [-12, 55, -37, 60],
                color: '#fff',
              },
              name: {
                fontSize: 10,
                color: '#7594BA',
                padding: [0, 16, 0, 10],
              },
              percent: {
                fontSize: 12,
                color: '#fff',
                padding: [0, 4, 0, 15],
              },
            },
          },
        },
        data: [
          { name: '粘胶定向组', value: 65 },
          { name: '设备维保课', value: 35 },
          { name: '公益课', value: 30 },
          { name: '掏棒课', value: 33 },
          { name: '制造课', value: 65 },
          { name: '剧组', value: 65 },
        ],
      },
    },
    option2: {
      tooltip: {
        trigger: 'item',
      },
      grid: {
        left: '6.5%',
        right: '3%',
        top: '26%',
        bottom: '10%',
      },
      legend: {
        show: true,
        orient: 'horizontal',
        icon: 'circle',
        top: '8%',
        right: '3%',
        itemWidth: 6,
        itemHeight: 6,
        textStyle: {
          color: '#f4f5ff',
          fontSize: 9,
        },
      },
      xAxis: [
        {
          data: ['10.10', '10.11', '10.12', '10.13', '10.14', '10.15', '10.16'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 8,
            },
            margin: 5, //刻度标签与轴线之间的距离。
          },

          axisLine: {
            show: true, //不显示x轴
            lineStyle: {
              color: '#384267',
            },
          },
          axisTick: {
            show: false, //不显示刻度
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            // width: 0.08,
            lineStyle: {
              type: 'solid',
              color: '#03202E',
            },
          },
        },
      ],
      yAxis: [
        {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#384267',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 8,
            },
          },
        },
      ],
      series: [
        //柱体
        {
          name: '工服警告',
          type: 'bar',
          barWidth: 7,
          barGap: '60%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#0b80dd',
                  },
                  {
                    offset: 1,
                    color: '#0ca3fb',
                  },
                ],
              },
            },
          },

          data: ['310', '240', '240', '240', '240', '240', '240'],
        },
        //柱体
        {
          name: '区域闯入',
          type: 'bar',
          barWidth: 7,
          barGap: '60%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 1,
                    color: '#e5653b',
                  },
                  {
                    offset: 0,
                    color: '#f94e60',
                  },
                ],
              },
            },
          },

          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
        //柱体
        {
          name: '车辆违停',
          type: 'bar',
          barWidth: 7,
          barGap: '60%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#8b7bfb',
                  },
                  {
                    offset: 1,
                    color: '#8b7bfb',
                  },
                ],
              },
            },
          },

          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
        //柱体
        {
          name: '设备告警',
          type: 'bar',
          barWidth: 7,
          barGap: '60%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#1cfef0',
                  },
                  {
                    offset: 1,
                    color: '#a7feb1',
                  },
                ],
              },
            },
          },

          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
        {
          name: '消防告警',
          type: 'bar',
          barWidth: 7,
          barGap: '60%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#3ac8fa',
                  },
                  {
                    offset: 1,
                    color: '#3ac8fa',
                  },
                ],
              },
            },
          },
          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
        //柱体
        {
          name: '其他告警',
          type: 'bar',
          barWidth: 7,
          barGap: '60%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#c2c2c1',
                  },
                  {
                    offset: 1,
                    color: '#edeced',
                  },
                ],
              },
            },
          },

          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
      ],
    },
    option3: {
      grid: {
        left: '15%',
        right: '14%',
        bottom: '0',
        top: '0',
        // containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return params[0].name + ' : ' + params[0].value
        },
      },
      xAxis: {
        show: false,
        // type: 'value'
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '11',
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ['区域闯入', '工服警告', '车辆违停', '设备警告', '其他警告'],
        },
        {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '11',
            },
          },
          data: [239, 181, 154, 144, 135],
        },
      ],
      series: [
        {
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: function (params) {
                var data = [
                  [
                    { offset: 0, color: '#fc847a' },
                    { offset: 1, color: '#bb3960' },
                  ],
                  [
                    { offset: 0, color: '#0f63e9' },
                    { offset: 1, color: '#09bbf7' },
                  ],
                  [
                    { offset: 0, color: '#8783fd' },
                    { offset: 1, color: '#b545f1' },
                  ],
                  [
                    { offset: 0, color: '#40e983' },
                    { offset: 1, color: '#37f7d2' },
                  ],
                  [
                    { offset: 0, color: '#eeefec' },
                    { offset: 1, color: '#deddda' },
                  ],
                ]
                var dataItem = data[params.dataIndex]
                return new echarts.graphic.LinearGradient(0, 1, 1, 1, dataItem)
              },
            },
          },
          barWidth: 8,
          data: [239, 181, 154, 144, 135],
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: 8,
          barGap: '-100%',
          data: [239, 239, 239, 239, 239],
          itemStyle: {
            normal: {
              color: '#263562',
              barBorderRadius: 30,
            },
          },
        },
      ],
    },
    centerList: [
      {
        name: '区域闯入',
        all: 89,
        status: 'reduce',
        num: 3,
       
      },
      {
        name: '设备警告',
        all: 281,
        status: 'ping',
        num: 0,
      },
      { name: '工服警告', all: 5, status: 'add', num: 3,},
      { name: '车辆违停', all: 13, status: 'add', num: 1,  },
      { name: '消防告警', all: 89, status: 'add', num: 5, },
    ],
    safetyList1: [
      { name: '监控在线数', num: 358, pic: '台', status: 'g' },
      { name: '监控在线率', num: 98, pic: '%', status: 'y' },
      { name: '监控掉线数', num: 6, pic: '台', status: 'r' },
    ],
    safetyList2: [
      { name: '门禁在线数', num: 75, pic: '台', status: 'g' },
      { name: '门禁在线率', num: 100, pic: '%', status: 'y' },
      { name: '门禁掉线数', num: 0, pic: '台', status: 'r' },
    ],
    optionsSelect: [
      { name: '区域闯入',value:1 },
      { name: '工服',value:2 },
      { name: '车辆违停',value:3 },
      { name: '设备警告',value:4 },
      { name: '消防警告',value:5 },
      { name: '其他警告',value:6 },
    ],
    selectNav: [{ name: '月度' }, { name: '季度' }, { name: '年度' }],
  })

  // 创建完成
  onMounted(() => {})

  return {
    state,
  }
}
